<template>
  <el-row >
    <el-col :span="12">
      <el-card>
        <div class="echarts" id="chartOptions1" style="height: 200px;"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div class="echarts" id="chartOptions2" style="height: 200px;"></div>
      </el-card>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-card>
        <div class="echarts" id="chartOptions3" style="height: 200px;"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div class="echarts" id="chartOptions4" style="height: 200px;"></div>
      </el-card>
    </el-col>
  </el-row>
</template>


<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from 'vue';
import '@/assets/js/china.js'
import {getCityPositionByName} from "@/assets/js/cityPostion.js";

onMounted(() => {
  let chartOptions1 = echarts.init(document.getElementById('chartOptions1'));
  let chartOptions2 = echarts.init(document.getElementById('chartOptions2'));
  let chartOptions3 = echarts.init(document.getElementById('chartOptions3'));
  let chartOptions4 = echarts.init(document.getElementById('chartOptions4'));
  chartOptions1.setOption({
    tooltip: {
      trigger: '商品分布'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '商品分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      }
    ]
  })
  chartOptions2.setOption({
    dataset: [
      {
        dimensions: ['name', 'age', 'profession', 'score', 'date'],
        source: [
          ['Hannah Krause', 41, 'Engineer', 314, '2011-02-12'],
          ['Zhao Qian', 20, 'Teacher', 351, '2011-03-01'],
          ['Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
          ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
          ['Karle Neumann', 25, 'Engineer', 253, '2011-04-02'],
          ['Adrian Groß', 19, 'Teacher', '-', '2011-01-16'],
          ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
          ['Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
          ['Han Meimei', 67, 'Engineer', 366, '2011-03-12']
        ]
      },
      {
        transform: {
          type: 'sort',
          config: { dimension: 'score', order: 'desc' }
        }
      }
    ],
    xAxis: {
      type: 'category',
      axisLabel: { interval: 0, rotate: 30 }
    },
    yAxis: {},
    series: {
      type: 'bar',
      encode: { x: 'name', y: 'score' },
      datasetIndex: 1
    }
  })
  let mockData = [
    { name: '北京', value: 500 },
    { name: '天津', value: 200 },
    { name: '河南', value: 300 },
    { name: '广西', value: 300 },
    { name: '广东', value: 300 },
    { name: '河北', value: 300 },
  ]
  let data = mockData.map(i => {
    let cityPosition = getCityPositionByName(i.name).value
    return {
      name: i.name,
      value: cityPosition.concat(i.value),
    }
  })

  chartOptions3.setOption({
    backgroundColor: 'transparent', // 设置背景色透明
    // 必须设置
    tooltip: {
      show: false,
    },
    // 地图阴影配置
    geo: {
      map: 'china',
      // 这里必须定义，不然后面series里面不生效
      tooltip: {
        show: false,
      },
      label: {
        show: false,
      },
      zoom: 1.03,
      silent: true, // 不响应鼠标时间
      show: true,
      roam: false, // 地图缩放和平移
      aspectScale: 0.75, // scale 地图的长宽比
      itemStyle: {
        borderColor: '#0FA3F0',
        borderWidth: 1,
        areaColor: '#070f71',
        shadowColor: 'rgba(1,34,73,0.48)',
        shadowBlur: 10,
        shadowOffsetX: -10,
        shadowOffsetY: 10,
      },
      select: {
        disabled: true,
      },
      emphasis: {
        disabled: true,
        areaColor: '#00F1FF',
      },
      // 地图区域的多边形 图形样式 阴影效果
      // z值小的图形会被z值大的图形覆盖
      top: '10%',
      left: 'center',
      // 去除南海诸岛阴影 series map里面没有此属性
      regions: [{
        name: '南海诸岛',
        selected: false,
        emphasis: {
          disabled: true,
        },
        itemStyle: {
          areaColor: '#00000000',
          borderColor: '#00000000',
        },
      }],
      z: 1,
    },
    series: [
      // 地图配置
      {
        type: 'map',
        map: 'china',
        zoom: 1,
        tooltip: {
          show: false,
        },
        label: {
          show: true, // 显示省份名称
          color: '#ffffff',
          align: 'center',
        },
        top: '10%',
        left: 'center',
        aspectScale: 0.75,
        roam: false, // 地图缩放和平移
        itemStyle: {
          borderColor: '#3ad6ff', // 省分界线颜色  阴影效果的
          borderWidth: 1,
          areaColor: '#17348b',
          opacity: 1,
        },
        // 去除选中状态
        select: {
          disabled: true,
        },
        // 控制鼠标悬浮上去的效果
        emphasis: { // 聚焦后颜色
          disabled: false, // 开启高亮
          label: {
            align: 'center',
            color: '#ffffff',
          },
          itemStyle: {
            color: '#ffffff',
            areaColor: '#0075f4',// 阴影效果 鼠标移动上去的颜色
          },
        },
        z: 2,
        data: data,
      },
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin',
        symbolSize: [50, 50],
        label: {
          show: true,
          color: '#fff',
          formatter(value) {
            return value.data.value[2]
          },
        },
        itemStyle: {
          color: '#e30707', //标志颜色
        },
        z: 2,
        data: data,
      },
    ],
  })

  chartOptions4.setOption({
    title: { text: '活跃用户' },
    xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },
    yAxis: { type: 'value' },
    series: [{ data: [150, 250, 350, 400, 500], type: 'line' }]
  })
})

</script>


<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}

</style>